<template>
  <div class="app-container">
    <el-tabs type="border-card" v-model="activeName" @tab-click="tabClick">
      <el-tab-pane :label="$t('微信设置')" name="wechat">
        <div class="end_order ipt_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('小程序ID')}}：</span>
          <el-input v-model="wechat.appid" :placeholder="$t('请输入')"></el-input>
        </div>
        <div class="end_order ipt_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('小程序密钥')}}：</span>
          <el-input v-model="wechat.appkey" :placeholder="$t('请输入')"></el-input>
        </div>
        <div class="end_order ipt_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('商户号')}}：</span>
          <el-input v-model="wechat.merchant" :placeholder="$t('请输入')"></el-input>
        </div>
        <div class="end_order ipt_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('商户')}}key：</span>
          <el-input v-model="wechat.merchant_key" :placeholder="$t('请输入')"></el-input>
        </div>
        <div class="end_order ipt_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('证书号')}}：</span>
          <el-input v-model="wechat.serial_no" :placeholder="$t('请输入')"></el-input>
        </div>
        <div class="end_order ipt_list u-f u-f-ac">
          <span class="lable font14 text_black">SSLCERT：</span>
          <upload-file :on-success="wePublicSuccess" :text="$t('导入文件')"></upload-file>
          <span class="tip font14 text_blue">
            {{
            wechat.wePublicKey.name
            ? wechat.wePublicKey.name
            : wechat.wePublicKey
            }}
          </span>
          <span class="tip font14 text_danger">{{$t('请上传API证书中的')}}apiclient_cert.pem{{$t('文件')}}</span>
        </div>
        <div class="end_order ipt_list u-f u-f-ac">
          <span class="lable font14 text_black">SSLKEY：</span>
          <upload-file :on-success="wePrivateSuccess" :text="$t('导入文件')"></upload-file>
          <span class="tip font14 text_blue">
            {{
            wechat.wePrivateKey.name
            ? wechat.wePrivateKey.name
            : wechat.wePrivateKey
            }}
          </span>
          <span class="tip font14 text_danger">{{$t('请上传API证书中的')}}apiclient_key.pem{{$t('文件')}}</span>
        </div>
        <div class="end_order ipt_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('开启免押')}}：</span>
          <el-radio-group v-model="wechat.credit">
            <el-radio :label="1">{{$t('开启')}}</el-radio>
            <el-radio :label="2">{{$t('关闭')}}</el-radio>
          </el-radio-group>
        </div>
        <div class="end_order ipt_list u-f u-f-ac" v-show="wechat.credit == 1">
          <span class="lable font14 text_black">V3{{$t('密钥')}}：</span>
          <el-input v-model="wechat.v3_secret" :placeholder="$t('请输入')"></el-input>
        </div>
        <div class="end_order ipt_list u-f u-f-ac" v-show="wechat.credit == 1">
          <span class="lable font14 text_black">service ID：</span>
          <el-input v-model="wechat.service_id" :placeholder="$t('请输入')"></el-input>
        </div>

        <el-button
          class="note_btn"
          type="primary"
          @click="wechatSubmit"
          v-if="permissions.indexOf('/set/app') != -1"
        >{{$t('提交')}}</el-button>
      </el-tab-pane>

      <el-tab-pane :label="$t('支付宝设置')" name="alipay">
        <div class="end_order ipt_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('小程序ID')}}：</span>
          <el-input v-model="alipay.appid" :placeholder="$t('请输入')"></el-input>
        </div>
        <div class="end_order ipt_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('支付宝商家号')}}：</span>
          <el-input v-model="alipay.merchant" :placeholder="$t('请输入')"></el-input>
        </div>
        <div class="end_order ipt_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('支付宝公钥')}}：</span>
          <upload-file :on-success="aliPublicSuccess" :text="$t('导入文件')"></upload-file>
          <span class="tip font14 text_blue">
            {{
            alipay.aliPublicKey.name
            ? alipay.aliPublicKey.name
            : alipay.aliPublicKey
            }}
          </span>
          <span class="tip font14 text_danger">{{$t('注意')}}：{{$t('不是应用公钥')}}</span>
        </div>
        <div class="end_order ipt_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('小程序私钥')}}：</span>
          <upload-file :on-success="aliPrivateSuccess" :text="$t('导入文件')"></upload-file>
          <span class="tip font14 text_blue">
            {{
            alipay.aliPrivateKey.name
            ? alipay.aliPrivateKey.name
            : alipay.aliPrivateKey
            }}
          </span>
        </div>
        <div class="end_order ipt_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('RSA2')}}：</span>
          <upload-file :on-success="aliRSA2Success" :text="$t('导入文件')"></upload-file>
          <span class="tip font14 text_blue">
            {{
            alipay.aliRSA2.name
            ? alipay.aliRSA2.name
            : alipay.aliRSA2
            }}
          </span>
        </div>
        <div class="end_order ipt_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('RootCert')}}：</span>
          <upload-file :on-success="aliRootCertSuccess" :text="$t('导入文件')"></upload-file>
          <span class="tip font14 text_blue">
            {{
            alipay.aliRootCert.name
            ? alipay.aliRootCert.name
            : alipay.aliRootCert
            }}
          </span>
        </div>
        <div class="end_order ipt_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('PublicKey')}}：</span>
          <upload-file :on-success="aliPublicKeySuccess" :text="$t('导入文件')"></upload-file>
          <span class="tip font14 text_blue">
            {{
            alipay.aliPublic.name
            ? alipay.aliPublic.name
            : alipay.aliPublic
            }}
          </span>
        </div>
        <div class="end_order ipt_list u-f u-f-ac">
          <span class="lable font14 text_black">{{$t('开启免押')}}：</span>
          <el-radio-group v-model="alipay.credit">
            <el-radio :label="1">{{$t('开启')}}</el-radio>
            <el-radio :label="2">{{$t('关闭')}}</el-radio>
          </el-radio-group>
        </div>
        <div class="end_order ipt_list u-f u-f-ac" v-show="alipay.credit == 1">
          <span class="lable font14 text_black">service ID：</span>
          <el-input v-model="alipay.service_id" :placeholder="$t('请输入')"></el-input>
        </div>

        <el-button
          class="note_btn"
          type="primary"
          @click="alipaySubmit"
          v-if="permissions.indexOf('/set/app') != -1"
        >{{$t('提交')}}</el-button>
      </el-tab-pane>
    </el-tabs>
    <refresh @click="handleRefresh"></refresh>
  </div>
</template>
<script>
import uploadFile from "components/upload/me-upload-file.vue";
import util from "@/assets/js/util.js";
import { mapState } from "vuex";
export default {
  name: "set-app",
  data() {
    return {
      activeName: 'wechat',
      wechat: {
        appid: "",
        appkey: "",
        merchant: "",
        merchant_key: "",
        wePublicKey: "",
        wePrivateKey: "",
        v3_secret: "",
        service_id: "",
        serial_no: "",
        credit: 1
      },
      alipay: {
        appid: "",
        merchant: "",
        aliPublicKey: "",
        aliPrivateKey: "",
        aliRSA2:"",
        aliRootCert:"",
        aliPublic:"",
        service_id: "",
        credit: 1
      }
    };
  },
  components: {
    uploadFile
  },
  computed: {
    ...mapState(["permissions"])
  },
  mounted() {
    this.getData("wechat");
  },
  methods: {
    handleRefresh() {
      this.activeName = 'wechat'
      this.getData("wechat");
    },
    getData(type) {
      util
        .$http("/set/info", {
          type
        })
        .then(res => {
          if (res.code == 1) {
            if (type == "wechat") {
              this.wechat = {
                appid: res.data.appid,
                appkey: res.data.appsecret,
                merchant: res.data.mchid,
                merchant_key: res.data.mchkey,
                wePublicKey: this.handleLong(res.data.sslcert_path),
                wePrivateKey: this.handleLong(res.data.sslkey_path),
                v3_secret: res.data.v3_secret,
                service_id: res.data.service_id,
                serial_no: res.data.api_serial_no,
                credit: res.data.wechat_credit == "true" ? 1 : 2
              };
            } else if (type == "alipay") {
              this.alipay = {
                appid: res.data.ali_appid,
                merchant: res.data.payee_user_id,
                aliPublicKey: this.handleLong(res.data.ali_public_key),
                aliPrivateKey: this.handleLong(res.data.ali_private_key),
                aliRSA2: this.handleLong(res.data.alipay_cert),
                aliRootCert: this.handleLong(res.data.root_cert),
                aliPublic: this.handleLong(res.data.app_cert),
                service_id: res.data.service_id,
                credit: res.data.alipay_credit == "true" ? 1 : 2
              };
            }
          }
        });
    },
    handleLong(str) {
      let arr = str.split('/')
      return arr[arr.length - 1]
    },
    tabClick(val) {
      if (val.index == 0) {
        this.getData("wechat");
      } else if (val.index == 1) {
        this.getData("alipay");
      }
    },
    wePublicSuccess(file) {
      this.wechat.wePublicKey = file;
    },
    wePrivateSuccess(file) {
      this.wechat.wePrivateKey = file;
    },
    wechatSubmit() {
      let formData = new FormData();
      let wechat_credit = this.wechat.credit == 1 ? "true" : "false";
      formData.append("type", "wechat");
      formData.append("mchid", this.wechat.merchant);
      formData.append("mchkey", this.wechat.merchant_key);
      formData.append("sslcert_path", this.wechat.wePublicKey);
      formData.append("sslkey_path", this.wechat.wePrivateKey);
      formData.append("appid", this.wechat.appid);
      formData.append("appsecret", this.wechat.appkey);
      formData.append("v3_secret", this.wechat.v3_secret);
      formData.append("serial_no", this.wechat.serial_no);
      formData.append("service_id", this.wechat.service_id);
      formData.append("wechat_credit", wechat_credit);
      util.$http("/set/app", formData).then(res => {
        if (res.code == 1) {
          this.$message({
            message: res.msg,
            type: "success"
          });
          this.getData("wechat");
        }
      });
    },
    aliPublicSuccess(file) {
      this.alipay.aliPublicKey = file;
    },
    aliPrivateSuccess(file) {
      this.alipay.aliPrivateKey = file;
    },
    aliRSA2Success(file){
      this.alipay.aliRSA2 = file
    },
    aliRootCertSuccess(file){
      this.alipay.aliRootCert = file
    },
    aliPublicKeySuccess(file){
      this.alipay.aliPublic = file
    },
    alipaySubmit() {
      let formData = new FormData();
      let alipay_credit = this.alipay.credit == 1 ? "true" : "false";
      formData.append("type", "alipay");
      formData.append("ali_appid", this.alipay.appid);
      formData.append("payee_user_id", this.alipay.merchant);
      formData.append("ali_public_key", this.alipay.aliPublicKey);
      formData.append("ali_private_key", this.alipay.aliPrivateKey);
      formData.append("alipay_cert", this.alipay.aliRSA2);
      formData.append("root_cert", this.alipay.aliRootCert);
      formData.append("app_cert", this.alipay.aliPublic);
      formData.append("service_id", this.alipay.service_id);
      formData.append("alipay_credit", alipay_credit);
      util.$http("/set/app", formData).then(res => {
        if (res.code == 1) {
          this.$message({
            message: res.msg,
            type: "success"
          });
          this.getData("alipay");
        }
      });
    }
  }
};
</script>
<style scoped>
.app-container .ipt_list {
  margin: 15px 0 0 100px;
}
.app-container .size_b {
  font-size: 30px;
  font-weight: bold;
}
.app-container .ipt_list .lable {
  display: inline-block;
  width: 120px;
}
.app-container .ipt_list .el-input {
  width: 500px;
  margin-right: 15px;
}
.ipt_list .tip {
  margin-left: 15px;
}
.app-container .end_order {
  padding-left: 50px;
}
.app-container .text_right {
  margin-right: 30px;
}
.app-container .text_link {
  margin: 0 0 4px 10px;
  color: red;
  border-bottom: 1px solid red;
}
.app-container .el-textarea {
  width: 500px;
}
.app-container .el-textarea__inner {
  min-height: 60px !important;
}
.app-container .note_btn {
  margin: 30px 0 0 500px;
}
.app-container .first_cla {
  display: inline;
}
.app-container .tft_ma {
  margin-left: 20px;
}
</style>
